<template>
  <div id="wordcloud" style="width: 100%; height: 100%"></div>
</template>

<script>
import wordcloudData from "../../assets/json/词云(副本).json";
import wordcloudAllData from "../../assets/json/词云all.json";
import { onMounted, watch } from "vue";
import { useStore } from "vuex";
import * as echarts from "echarts";
import "echarts-wordcloud";
export default {
  data() {
    return {
      wordcloudData,
      wordcloudAllData,
    };
  },
  setup() {
    const store = useStore();
    const time = store.state.time;
    watch(
      () => store.state.time,
      (newTime) => {
        if (wordcloudAllData[newTime]) {
          wordcloud(newTime);
        }
      }
    );

    onMounted(() => {
      wordcloud(time);
    });

    function wordcloud(newTime) {
      let content = wordcloudAllData[newTime];
      draw_wordcloud(newTime, content);
    }
    function draw_wordcloud(newTime, content) {
      let myChart = echarts.init(document.getElementById("wordcloud"));

      // 指定的颜色数组
      const colors = [

        "#899790", "#60715f", "#b6976e",
        "#a7a18c", "#715752", "#878876", "#4f5460"

      ];

      let option = {
        title: {
          text: newTime,
          left: "center",
        },
        series: [
          {
            type: "wordCloud",
            // maskImage: maskImage,
            sizeRange: [1, 80],
            size: ["80%", "80%"], //设置显示的字云图的大小
            textRotation: [0, 45, 90, 135, -45, -90], //设置文字倾斜角度
            textPadding: 3, //设置文字之间的间距
            autoSize: { enable: true, minSize: 5 }, //设置文字的自动大小
            rotationRange: [0, 0],
            drawOutOfBound: false,
            textStyle: {
              color: function () {
                // 从指定的颜色数组中随机选择一个颜色
                return colors[Math.floor(Math.random() * colors.length)];
              },
              fontFamily: "sans-serif",


              emphasis: {
                shadowBlur: 10,
                shadowColor: "#333",
              },
            },
            data: content,
          },
        ],
      };
      // console.log(111);
      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option);
    }
  },
};
</script>

<style></style>